<template>
	<view class="content">
		<view class="logistics-block block" v-if="info.goodsType==1">
			<view class="info-item" v-if="info.status!==1&&info.deliveryVo">
				<view class="iconfont icon-peihuo" style="color: #46AD35;"></view>
				<view class="title-item" @click="navigate('/page_other/integral_store/detail?id='+info.id)">
					<view class="title">
						<view class="text" style="color: #46AD35;">
							{{info.deliveryVo.result.list[0].status ||''}}
						</view>
						<view class="time">{{info.deliveryVo.result.list[0].time}}</view>
					</view>
					<image class="more"
						src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/more.png">
					</image>
				</view>
			</view>
			<view class="info-item" >
				<view class="iconfont icon-dizhiguanli"></view>
				<view class="title-item">
					<view class="title">
						<view class="address">
							{{info.addressModel.contacts}},{{info.addressModel.phone}},{{info.addressModel.area}},{{info.addressModel.address}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="activity-item block">
			<view class="activity-middle" @click="navigate1">
				<image :src="cloudStorage+info.goodsFace" mode=""></image>
				<view class="middle-right">
					<view class="info-top">
						<view class="info-title">
							{{info.goodsName}}
						</view>
						<view class="involution">
							共{{info.number}}件
						</view>
					</view>
					<view class="info-time" style="display: flex;">
						￥{{info.integral}}积分
						<view v-if="info.voucher">
							+{{info.voucher}}券
						</view>
					</view>
				</view>
			</view>
			<view class="activity-bottom">
				<view class="cancel">
					订单编号：{{info.orderSn}}
				</view>
				<view v-if="info.deliveryVo.result.expName" class="cancel">
					物流公司：{{ info.deliveryVo.result.expName }}
				</view>
				<view v-if="info.deliveryVo.result.number" class="cancel">
					快递单号：{{ info.deliveryVo.result.number }}
				</view>
				<view class="cancel">
					下单时间：{{ info.createTime }}
				</view>
				<view class="cancel" >
					核销对象：
					<template v-if="info.businessId">{{info.businessName}}</template>
					<template v-else>赋能店</template>
				</view>
				<view class="cancel" v-if="info.businessAddress">
					核销地址：{{ info.businessAddress }}
				</view>
			</view>

			<view class="activity-bottom" v-if="info.goodsType==1">
				<view v-if="info.status >= 4" class="cancel">
					退款状态：
					<template v-if="info.status === 4">售后申请中</template>
					<template v-else-if="info.status === 5">已拒绝</template>
					<template v-else-if="info.status === 6">已退款</template>
				</view>
				<view v-if="info.status ==5 || info.status ==6" class="cancel">
					备注：{{ info.refundRemarks }}
				</view>
			</view>

		</view>
		<view class="btn-block" v-if="info.goodsType==1">
			<view v-if="info.deliveryVo && info.status!==1" class="step"
				@click="navigate('/page_other/integral_store/detail?id='+info.id)">查看物流
			</view>
			<view v-if="info.status===2" class="step" @click="confirm">确认收货</view>
			<!-- <view v-if="info.status < 4&&info.voucher" class="step" @click="applyRefund">申请售后</view> -->
			<view v-if="info.status ==1&&info.integral&&info.voucher!=0" class="step" @click="applyRefund">申请售后</view>
			<button open-type="contact" v-if="info.status ==1&&info.integral&&info.voucher==0" style="width: 200rpx;"
				class="step1">联系客服</button>
			<button open-type="contact" v-if="info.status !==1&&info.integral&&!info.voucher" style="width: 200rpx;"
				class="step1">联系客服</button>
			<!-- <view class="step" @click="navigate('/page_other/mine/mine')">联系客服</view> -->
		</view>
		
		<view class="btn-block" v-if="info.goodsType==2">
			<button v-if="info.status==7" class="step" @click="openCode">核销码</button>
			<button open-type="contact" v-if="info.status==7"
				class="step">联系客服</button>
			<button  v-if="info.status==7"  class="cancel" @click="cancel">取消订单</button>
		</view>
	<view class="sign-pop" v-if="signShow == true">
			<view class="sign-block">
				<view class="sign-top">
					<view class="left">
						二维码
					</view>
					<view @click="close">
						<image
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/close.png"
							mode=""></image>
					</view>
				</view>
				<image :src="cloudStorage+verificationFilepath" mode="widthFix"></image>
			</view>
		</view>
	
	</view>
</template>

<script>
	import {
		confirmReceipt,
		getIntegralOrderById,
		refundOfIntegralGoods,
		cancelOrderOfflineIntegralGoods
	} from '@/api/integral.js';
	import {
		getStorage
	} from '@/util/auth.js';

	export default {
		data() {
			return {
				info: {
					createTime: '',
					deliveryVo: {
						deliveryVo: '',
						result: {
							expName: '',
							number: '',
							list: []
						}
					},
					orderSn: '',
					voucher: '',
					goodsFace: '',
					addressModel: {
						contacts: '',
						area: '',
						address: '',
						phone: ''
					},
					goodsId: '',
					goodsName: '',
					number: '',
					integral: '',
					voucher: '',
					integralGoodsId: ''
				},
				id: null,
				longitude: '',
				latitude: '',
				verificationFilepath: '',
				signShow: false
			}
		},
		methods: {
			close()
			{
				this.signShow=false
				this.getIntegralOrderById()
			},
			openCode(){
				
				this.verificationFilepath=this.info.codeUrl
				this.signShow=true
			
			},
			cancel()
			{
				var that = this
				uni.showModal({
					title: '提示',
					content: '您确定要取消订单吗？',
					cancelText: '取消',
					confirmText: '确定取消',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中',
								mask: true
							})
							cancelOrderOfflineIntegralGoods({
								orderSn: that.info.orderSn,
							}).then(() => {
				
								uni.showToast({
									title: '取消成功',
									duration: 2000,
									complete: () => { // 在 complete 回调函数中执行页面跳转
										uni.redirectTo({
											url: '/page_other/integral_store/index?status='
										});
									}
								});
				
							})
						}
					}
				});
			},
			applyRefund() {
				var that = this
				uni.showActionSheet({
					itemList: ['仅退款', '退货退款'],
					success: function(res) {
						let refund = res.tapIndex + 1
						uni.showModal({
							title: '提示',
							content: '您确定要申请售后吗？',
							cancelText: '取消',
							confirmText: '确定退款',
							success(res) {
								if (res.confirm) {
									uni.showLoading({
										title: '加载中',
										mask: true
									})
									refundOfIntegralGoods({
										orderSn: that.info.orderSn,
										type: refund
									}).then(() => {

										uni.showToast({
											title: '申请成功，请等待审核',
											duration: 2000,
											complete: () => { // 在 complete 回调函数中执行页面跳转
												uni.redirectTo({
													url: '/page_other/integral_store/index?status='
												});
											}
										});

									})
								}
							}
						});
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			navigate1() {
				if (this.info.goodsId) {
					uni.navigateTo({
						url: '/page_other/integral/detail?id=' + this.info.goodsId
					})
				} else {
					uni.navigateTo({
						url: '/page_other/integral/intergralDetail?id=' + this.info.integralGoodsId
					})
				}
			},
			//用户查询积分订单详情
			getIntegralOrderById() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getIntegralOrderById({
					id: this.id
				}).then((res) => {
					// this.industry = res
					this.info = res
				})
			},
			confirm() {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '您确定收到货了吗？',
					cancelText: '取消',
					confirmText: '确认收货',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中',
								mask: true
							})
							confirmReceipt({
								orderSn: that.info.orderSn
							}).then(() => {

								uni.showToast({
									title: '收货成功',
									duration: 2000,
									complete: () => { // 在 complete 回调函数中执行页面跳转
										uni.redirectTo({
											url: '/page_other/mine/mine'
										});
									}
								});

							})
						}
					}
				})
			},
		},
		onLoad(e) {
			this.id = e.id;
			this.latitude = getStorage('latitude');
			this.longitude = getStorage('longitude');
			this.getIntegralOrderById()
		},
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		min-height: 100vh;
		padding-bottom: 20rpx;
		background: #EFEFEF;
		padding: 30rpx;

		.block {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 30rpx;
		}

		.logistics-block {
			.info-item:last-child {
				border-bottom: none;
				padding-top: 20rpx;
			}

			.info-item {
				display: flex;
				align-items: center;
				border-bottom: 1px solid #EFEFEF;
				padding-bottom: 20rpx;

				.iconfont {
					width: 80rpx;
					font-size: 38rpx;
					color: #FF2F34;
				}

				.title-item {
					width: calc(100% - 80rpx);
					display: flex;
					align-items: center;
					justify-content: space-between;

					.title {
						width: calc(100% - 45rpx);
						margin-top: 10rpx;

						.text {
							width: 100%;
							font-size: 32rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.address {
							font-size: 32rpx;
						}

						.time {
							font-size: 26rpx;
							color: #999;
							margin-top: 15rpx;
						}
					}

					.more {
						width: 35rpx;
						height: 35rpx;
					}
				}
			}
		}

		.activity-item {
			margin-top: 30rpx;

			.activity-middle {
				display: flex;

				image {
					width: 120rpx;
					height: 120rpx;
					margin-right: 20rpx;
					border-radius: 20rpx;
				}

				.middle-right {
					width: calc(100% - 140rpx);
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.info-top {
						width: 100%;
						display: flex;
						justify-content: space-between;

						.info-title {
							width: calc(100% - 120rpx);
							font-size: 30rpx;
						}

						.involution {
							width: 120rpx;
							text-align: end;
							color: #767676;
							font-size: 28rpx;
						}
					}

					.info-time {
						font-size: 28rpx;
						font-weight: bold;
						line-height: normal;
						letter-spacing: 0em;
						color: #1A1A1A;
					}
				}
			}

			.activity-bottom {
				border-top: 1px solid #EFEFEF;
				font-size: 26rpx;
				color: #767676;
				margin-top: 20rpx;
				padding-top: 20rpx;

				.cancel {
					margin-bottom: 15rpx;
				}
			}
		}

		.btn-block {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			position: fixed;
			background: #fff;
			height: 180rpx;
			padding: 30rpx;
			bottom: 0;
			left: 0;

			.step:first-child {
				color: #FF2F34;
				background: none;
				border: 1px solid #FF2F34;
				margin-right: 20rpx;
				font-size: 28rpx;
			}

			.step {
				width: 30%;
				height: 80rpx;
				display: flex;
				background: linear-gradient(90deg, #FF2F34 0%, #FF6B18 100%);
				color: #fff;
				border-radius: 60rpx;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
			}
			
			.cancel{
				width: 30%;
				height: 80rpx;
				display: flex;
				background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
				color: #000;
				border-radius: 60rpx;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
			}
			.step1 {
				width: 300rpx;
				height: 80rpx;
				display: flex;
				background: linear-gradient(90deg, #FF2F34 0%, #FF6B18 100%);
				color: #fff;
				border-radius: 60rpx;
				justify-content: center;
				align-items: center;
				margin-right: -10rpx;
			}
		}
	.sign-pop {
			position: fixed;
			left: 0;
			top: 0;
			background: rgba(0, 0, 0, 0.2);
			z-index: 999999;
			width: 100vw;
			height: 100vh;

			.sign-block {
				width: calc(100% - 240rpx);
				height: 550rpx;
				background: #fff;
				z-index: 99;
				position: fixed;
				transform: translate(-50%, 0%);
				left: 50%;
				bottom: 29%;
				box-shadow: 0 0 6px 0px #dadada;
				border-radius: 30rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 30rpx;

				.sign-top {
					display: flex;
					justify-content: space-between;
					width: 100%;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}

				image {
					width: 100%;
				}
			}
		}
	
	}
</style>